<template>
    <a-card>
        <a-form :model="formState" :label-col="{ span: 2 }" :wrapper-col="{ span: 10 }">
            <a-form-item label="文章名:">
                <a-input v-model:value="formState.name" />
            </a-form-item>
            <a-form-item label="文章类型:">
                <a-radio-group v-model:value="formState.type">
                    <a-radio :value="1">新闻资讯</a-radio>
                    <a-radio :value="2">技术文档</a-radio>
                    <a-radio :value="2">时事评论</a-radio>
                </a-radio-group>
            </a-form-item>
            <a-form-item label="文章封面:">
                <a-upload
                    name="avatar"
                    list-type="picture-card"
                    class="avatar-uploader"
                    :show-upload-list="false"
                    action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                >
                    <img v-if="imageUrl" :src="imageUrl" alt="avatar" />
                    <div v-else>
                        <div class="ant-upload-text">点击上传</div>
                    </div>
                </a-upload>
            </a-form-item>
            <a-form-item label="标签:">
                <a-select
                    v-model:value="formState.tag"
                    mode="tags"
                    placeholder="请输入标签"
                >
                    <a-select-option v-for="i in 25" :key="(i + 9).toString(36) + i">
                    {{ (i + 9).toString(36) + i }}
                    </a-select-option>
                </a-select>
            </a-form-item>
        </a-form>
        <div class="my3">
            <QuillEditor theme="snow" style="height:300px"/>
        </div>
        <div class="mt1 ml6">
            <a-button type="primary">提交</a-button>
            <a-button class="ml2">取消</a-button>
        </div>
    </a-card>
</template>
<script lang='ts'>
import { defineComponent,ref,reactive,toRefs,UnwrapRef} from 'vue'
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css';
interface FormState {
  name: string;
}
interface DataProps {}
export default defineComponent({
    name: '',
    setup(props,context) {
         const formState: UnwrapRef<FormState> = reactive({
            name: '',
        });
        return {
            formState,
        }
    },
    components:{
        QuillEditor
    }
});
</script>
<style lang='scss' scoped>
</style>